<template>
  <el-container>
    <el-header>
      <el-page-header @back="back">
        <div style="font-weight:bold;padding-left:5px" slot="title">消息标题</div>
        <template slot="content">
          <div style="font-weight:bold;font-size:14px;">
            <span class="text-summary">{{messageModel.title}}</span>
          </div>
        </template>
      </el-page-header>
    </el-header>
    <el-main>
      <el-container>
        <el-header>
          <el-form :model="messageModel" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="发件人">
                  <el-input v-model="messageModel.senderName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收件人">
                  <el-input v-model="messageModel.receiverName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发送时间">
                  <el-input v-model="messageModel.sendTime" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-header>
        <el-main>

          <el-tabs v-model="activeName" @tab-click="tabClick" tab-position="left">
            <el-tab-pane label="消息内容" name="bodyContent">
              <mf-monacoEditor ref="bodyContent" v-model="messageModel.body" language="html" theme="vs-dark" readOnly ></mf-monacoEditor>
            </el-tab-pane>
            <el-tab-pane label="数据模型" name="dataContent">
              <mf-monacoEditor ref="dataContent" :value="dataContent" language="json" theme="vs-dark" readOnly ></mf-monacoEditor>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>

    </el-main>
    <el-footer>

      <el-form :model="messageModel" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="消息组">
              <el-input v-model="messageModel.groupName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板">
              <el-input v-model="messageModel.templateName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      messageModel: {
        messageId: '',
        groupName: '',
        title: '',
        senderId: '',
        senderName: '',
        receiverId: '',
        receiverName: '',
        templateName: '',
        data: '',
        body: '',
        sendTime: ''
      },
      activeName: "bodyContent",
      dataContent: null
    };
  },
  computed: {
    messageId(){
      return this.$route.params.id;
    }
  },
  created() {
  },
  mounted() {
    this.loadObject();
  },
  methods: {
    loadObject() {
      this.$service.message.item({ params: { messageId: this.messageId }}).then((response) => {
        if (response.success && response.data) {
          this.messageModel = Object.assign(this.messageModel, response.data);
        }
      });
    },
    back() {
      this.$router.push({ name: "message" });
    },
    tabClick(tab, event){

      this.$nextTick(() => {

        this.$refs[this.activeName].layout();
        if (this.activeName == 'dataContent'){
          if (this.messageModel && this.messageModel.data){
            let obj = JSON.parse(this.messageModel.data);
            this.dataContent = JSON.stringify(obj, null, 4);
          }
        }
      });

    }
  },
};
</script>
